<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="header::header"></head>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta name="renderer" content="ie-comp"/>
    <meta name="renderer" content="ie-stand"/>
    <title>普惠商城-个人中心-订单页面</title>
    <!-- 个人中心通用样式personal.css -->
    <link rel="stylesheet" th:href="@{/css/personal-order-online.css}">
    <link rel="stylesheet" th:href="@{/css/paging.css}">
    <style>
        a:hover {
            cursor: pointer
        }
    </style>
</head>
<body>
<div th:include="commonfragment::order-top-search-nav"></div>
<!--个人中心中间主体框架  -->
<div class="centerbody personal_middle">
    <!-- 左侧通用导航栏 -->
    <div class="personal_middle_nav" th:include="commonfragment::order-left-menu-nav"></div>
    <div class="centerbody personal_middle_main">
        <div class="personal_middle_main_tit">
            <span>订单中心</span>><span>线上订单</span>
        </div>
        <!-- 订单tab标签 -->
        <div data-role="page">
            <div data-role="content-floud">
                <div style="font-family: '微软雅黑';">
                    <ul id="hear">
                        <li data-order-status="0">
                            <a href="javascript:void(0)">全部订单
                                <span style="color: red;"></span>
                            </a>
                        </li>
                        <li data-order-status="1">
                            <a href="javascript:void(0)">待付款
                                <span style="color: red;"></span>
                            </a>
                        </li>
                        <li data-order-status="3">
                            <a href="javascript:void(0)">待收货
                                <span style="color: red;"></span>
                            </a>
                        </li>
                        <li data-order-status="7">
                            <a href="javascript:void(0)">已退货
                                <span style="color: red;"></span>
                            </a>
                        </li>
                        <li data-order-status="4">
                            <a href="javascript:void(0)" style="border-right:none;">已完成
                                <span style="color: red;"></span>
                            </a>
                        </li>
                    </ul>
                    <ul id="contentop">
                        <li class="box1 action" style="width: 1020px;">
                            <div class="page show">
                                <div class="box_tit">
                                    <span>订单详情</span>
                                    <span>收货人</span>
                                    <span>金额</span>
                                    <span>数量</span>
                                    <span>状态</span>
                                    <span>操作</span>
                                </div>
                                <div class="goods_info_box" style="height:168px;" th:each="order,state:${orderList}">
                                    <th:block th:object="${order}">
                                        <div class="box_tit_2">
                                            <span>订单号：</span>
                                            <span th:text="*{orderNo}"></span>
                                            <span th:text="*{supplierName}"></span>
                                            <span class="time">下单时间：</span>
                                            <span class="time" th:text="*{deliveryDate}"></span>
                                        </div>
                                        <div style="background: red;">
                                            <div class="box_big">
                                                <div class="box_big_detail">
                                                    <img th:src="@{*{url}?*{url}:''}" alt="" class="box_big_detail_img">
                                                    <p class="box_big_detail_info" th:text="*{productName}"></p>
                                                    <div style="clear: both;"></div>
                                                </div>
                                            </div>
                                            <span class="box_small" th:text="*{contact}"></span>
                                            <span class="box_small" style="border-left: 1px solid #ccc;" th:text="'¥'+*{payMoney}"></span>
                                            <span class="box_small" th:text="*{num}"></span>
                                            <span class="box_small" th:if="*{status}==1">待付款</span>
                                            <span class="box_small" th:if="*{status}==2">待发货</span>
                                            <span class="box_small" th:if="*{status}==3">待收货</span>
                                            <span class="box_small" th:if="*{status}==4">已完成</span>
                                            <span class="box_small" th:if="*{status}==5">交易关闭</span>
                                            <span class="box_small" th:if="*{status}==6">退款中</span>
                                            <span class="box_small" th:if="*{status}==7">已退货</span>
                                            <span class="box_small">
                                                <a th:onclick="'toDetail(\''+*{id}+'\',\''+*{deliveryType}+'\');'">订单详情</a>

											    <a th:if="*{status}==1" th:onclick="'toPay(\''+*{id}+'\',\''+*{orderNo}+'\',\''+*{deliveryType}+'\',\''+*{payMoney}+'\');'">立即付款</a>
											    <a th:if="*{status}==1" class="cancel_order" th:value="*{orderNo}" href="javascript:void(0)">取消订单</a>
                                                <a th:if="*{status}==3" class="confirm_order" th:value="*{orderNo}" href="javascript:void(0)">确认收货</a>
                                                <!-- <a th:if="*{status}==3 or *{status}==2" href="javascript:void(0)">申请退款</a>
                                                 <a th:if="*{status}==7" href="javascript:void(0)">退货详情</a>-->
                                            </span>
                                        </div>
                                    </th:block>
                                </div>
                            </div>
                            <div class="tcdPageCode"></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 全部订单 -->

    </div>
    <div style="clear:both;"></div>
</div>

<!-- 页面底部 -->
<div th:include="footer::footer"></div>
<div class="login_box_2 order_cancel">
    <form action="">
        <div class="cancel_order_box">
            <p class="cancel_order_txt">是否要取消该订单？</p>
            <p style="margin-left: 49px;">
                <input type="button" class="cancel_order_btn" id="close_order" value="是" style="font-size: 14px;">
                <input type="button" class="cancel_order_btn cancel_btn" value="否" style="font-size: 14px;">
            </p>
        </div>
    </form>
</div>

<div class="shadow">
</div>
<div class="login_box_2 order_confirm">
    <form action="">
        <div class="cancel_order_box">
            <p class="cancel_order_txt">是否要确认收货？</p>
            <p style="margin-left: 49px;">
                <input type="button" class="cancel_order_btn" id="receipt_order" value="是" style="font-size: 14px;">
                <input type="button" class="cancel_order_btn cancel_btn" value="否" style="font-size: 14px;">
            </p>
        </div>
    </form>
</div>
</body>
<script th:src="@{/js/jquery.page.js}"></script>
<script th:inline="javascript">
    function toDetail(orderId, deliveryType) {
        Common.generateAutoSubmitForm({
            url: "/shopping/order/getOrderDetail",
            data: {
                orderId: orderId,
                deliveryType: deliveryType
            }
        });
    }

    function toPay(orderId, orderNo, deliveryType, payMoney) {
        Common.generateAutoSubmitForm({
            url: "/shopping/order/orderOnlinePay",
            data: {
                orderId: orderId,
                orderNo: orderNo,
                payMoney: payMoney,
                deliveryType: deliveryType
            }
        });
    }

    $(function () {
        $(".box1 input:checked").parent().parent().addClass("selected");
        $(".box1 input").change(function () {
            $(".box1 input:checked").parent().parent().addClass("selected").siblings().removeClass("selected");
        });
        $('input.paybutton').eq(0).addClass('choose');

        $('input.paybutton').hover(function () {
            $(this).addClass('choose');
            $(this).siblings().removeClass('choose');
        }, function () {
            $(this).removeClass('choose');
        });
        $('.cancel_btn').click(function () {
            $('.shadow').css('display', 'none');
            $('.login_box_2').css('display', 'none');
            $('.refundBox').css('display', 'none');
        });
        $('input.cancel_order_btn').hover(function () {
            $(this).addClass('confirm');
            $(this).siblings().removeClass('confirm');
        }, function () {
            $(this).removeClass('confirm');
        });
        $('input.gray').hover(function () {
            $(this).addClass('confirm');
            $(this).siblings().removeClass('confirm');
        }, function () {
            $(this).removeClass('confirm');
        });
        $('.cancel_small').click(function () {
            $('.shadow').css('display', 'none');
            $('.cancel_order').css('display', 'none');
        });
        $('.CloseBut').click(function () {
            $('.shadow').css('display', 'none');
            $('.refundBox').css('display', 'none');
        });

        $('.cancel_order').click(function () {
            $('.shadow').css('display', 'block');
            $('.order_cancel').css('display', 'block');
            //增加取消订单id
            $("#close_order").attr("close_order_id", $(this).attr("value"));
        });

        //绑定取消订单事件
        $("#close_order").click(function () {
            var close_order_id = $(this).attr("close_order_id");
            $.post("/shopping/order/updateOnlineOrder", {orderId: close_order_id, status: 5}, function () {
                window.location.href = "/shopping/order/findOnlineOrders";
            });
        });

        //绑定订单收货事件
        $("#receipt_order").click(function () {
            var receipt_order_id = $(this).attr("receipt_order_id");
            $.post("/shopping/order/updateOnlineOrder", {orderId: receipt_order_id, status: 4}, function () {
                window.location.href = "/shopping/order/findOnlineOrders";
            });
        });

        $('.shadow').css('height', $(window).height());
        $('.order_cancel').css('top', ($(window).height() - $('.order_cancel').height()) / 2);
        $('.order_cancel').css('left', ($(window).width() - $('.order_cancel').width()) / 2);
        $(window).resize(function () {
            $('.shadow').css('height', $(window).height());
            $('.order_cancel').css('top', ($(window).height() - $('.order_cancel').height()) / 2);
            $('.order_cancel').css('left', ($(window).width() - $('.order_cancel').width()) / 2);
        });
        $('.confirm_order').click(function () {
            $('.shadow').css('display', 'block');
            $('.order_confirm').css('display', 'block');
            //增加收货订单id
            $("#receipt_order").attr("receipt_order_id", $(this).attr("value"));
        });
        $('.shadow').css('height', $(window).height());
        $('.order_confirm').css('top', ($(window).height() - $('.order_confirm').height()) / 2);
        $('.order_confirm').css('left', ($(window).width() - $('.order_confirm').width()) / 2);
        $(window).resize(function () {
            $('.shadow').css('height', $(window).height());
            $('.order_confirm').css('top', ($(window).height() - $('.order_confirm').height()) / 2);
            $('.order_confirm').css('left', ($(window).width() - $('.order_confirm').width()) / 2);
        });
        $('.refund_order').click(function () {
            $('.shadow').css('display', 'block');
            $('.refundBox').css('display', 'block');
        });
        $('.shadow').css('height', $(window).height());
        $('.refundBox').css('top', ($(window).height() - $('.refundBox').height()) / 2);
        $('.refundBox').css('left', ($(window).width() - $('.refundBox').width()) / 2);
        $(window).resize(function () {
            $('.shadow').css('height', $(window).height());
            $('.refundBox').css('top', ($(window).height() - $('.refundBox').height()) / 2);
            $('.refundBox').css('left', ($(window).width() - $('.refundBox').width()) / 2);
        });
        $("#hear li").click(function () {
            $(this).css({
                borderBottom: "2px solid red",
                height: "43px"
            }).siblings().css({
                borderBottom: "none",
                height: "45px"
            });
        });

        $("#hear li").click(function () {
            $(this).addClass("action").siblings().removeClass("action");
            var index = $(this).index();
            $("#contentop li").eq(index).css("display", "block").siblings().css("display", "none");
        });

        //初始化页卡样式
        var status = [[${status}]];
        $("[data-order-status=" + status + "]").addClass("active").css({
            borderBottom: "2px solid red",
            height: "43px"
        }).siblings().css({
            borderBottom: "none",
            height: "45px"
        });
        $("#hear").find("li").click(function () {
            window.location.href = Common.generateUrl(
                "/shopping/order/findOnlineOrders",
                {
                    "status": $(this).attr("data-order-status")
                }
            );
        });

        /*分页*/
        $(".tcdPageCode").createPage({
            pageCount: Math.ceil([[${count}]] / [[${pageSize}]]),
            current: [[${pageNum}]],
            backFn: function (current) {
                window.location.href = Common.generateUrl(
                    "/shopping/order/findOnlineOrders",
                    {
                        status: $("#hear").find("li.active").attr("data-order-status"),
                        pageNum: current
                    }
                );
            }
        });

    });
</script>

</html>